<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
			
			<style type="text/css">
				#box{
					width: 100px;height: 100px;background: darkgoldenrod;
				}
			</style>
	</head>
	<body>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			var goX=0;
			var goY=0;
			var allX=0;
			var allY=0;
			var oldLenX=0;
			var oldLenY=0;
			document.addEventListener('touchmove',function(e){
				e.preventDefault();
			},false);
			box.addEventListener("touchstart",function(e){
				goX=e.changedTouches[0].pageX;
				oldLenX=allX;
				goY=e.changedTouches[0].pageY;
				oldLenY=allY;
			},false);
			box.addEventListener("touchmove",function(e){
				lenX=e.changedTouches[0].pageX-goX;
				allX=oldLenX+lenX;
				lenY=e.changedTouches[0].pageY-goY;
				allY=oldLenY+lenY;
				box.style.transform="translate("+allX+"px,"+allY+"px)";
			},false);
		</script>
		
	</body>
</html>
